<template>
	<div class="member-home">
		<HomeOverview></HomeOverview>
		<HomePanel title="我的收藏">
			<GoodsItem v-for="item in collectGoods" :key="item.id" :goods="item"></GoodsItem>
		</HomePanel>
		<HomePanel title="我的足迹">
			<GoodsItem v-for="item in collectGoods2" :key="item.id" :goods="item"></GoodsItem>
		</HomePanel>

		<GoodsRelevant />
	</div>
</template>

<script>
	import HomeOverview from './components/home-overview'
	import HomePanel from './components/home-panel'
	import GoodsRelevant from '@/views/goods/components/goods-relevant'
	import GoodsItem from '@/views/category/components/goods-item'
	import {
		findCollect
	} from '@/api/member.js'
	import {
		ref
	} from 'vue'

	export default {
		components: {
			HomeOverview,
			HomePanel,
			GoodsRelevant,
			GoodsItem
		},

		setup() {		
			const collectGoods = ref([])
			const collectGoods2 = ref([])
			
			findCollect({
				page: 1,
				pageSize: 4
			}).then(data => {
				collectGoods.value = data.result.items
			})
			
			findCollect({
				page: 2,
				pageSize: 4
			}).then(data => {
				collectGoods2.value = data.result.items
			})

			return {
				collectGoods,
				collectGoods2
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .xtx-carousel {
		.carousel-btn.prev {
			left: 5px;
		}

		.carousel-btn.next {
			right: 5px;
		}
	}
</style>
